<template>
	<view class="swiper-main">
		<view class="swiper-content" :style="'color:' + color + ';background-color:' + backgroundColor + ';border-color:' + borderColor + ';height:' + height">
			<view v-for="(item, index) in list" :key="index" @click="choose(item.id)">
				<view class="swiper-item u-line-1" v-if="showIndex == index" :style="'line-height:' + height">
					<text class="u-line-1">{{ item.intro }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		borderColor: {
			type: String,
			default: '#333333'
		},
		color: {
			type: String,
			default: '#181924'
		},
		backgroundColor: {
			type: String,
			default: 'white'
		},
		list: {
			type: Array,
			default: []
		},
		height: {
			type: String,
			default: '90rpx'
		}
	},
	data() {
		return {
			showIndex: 0, //当前展示的轮播
			timer: {}
		};
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	mounted() {
		this.timer = setInterval(() => {
			this.showIndex = this.showIndex == this.list.length - 1 ? 0 : ++this.showIndex;
		}, 2900);
	},
	methods: {
		choose(id) {
			this.$emit('handleNotice', id);
		}
	}
};
</script>

<style lang="less" scoped>
.swiper-main {
	width: 100%;
	display: flex;
	// justify-content: center;

	.swiper-content {
		width: 90%;
		box-sizing: border-box;
		// border-radius: 55rpx;
		position: relative;
		display: flex;
		// justify-content: center;
		overflow: hidden;
		.swiper-item {
			font-size: 24rpx;
			color: #333;
			width: 98%;
			height: 100%;
			text-align: left;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			animation: animation-key 3s linear 0s 1 normal;
			padding-left: 30rpx;
		}
	}

	@keyframes animation-key {
		0% {
			top: 100%;
		}
		10% {
			top: 50%;
		}
		80% {
			top: 50%;
		}
		100% {
			top: -50%;
		}
	}
}
</style>
